<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue入门</title>
    <style>
        .red-bg{background: red}
        .green-bg{background: green}
    </style>
</head>
<body>
<div id="app">
    <p>{{message}}</p>
    <p>姓名：{{person.name}} 年龄：{{person.age}} 性别：{{person.gender}}</p>
<!--    v-if通过条件判断，觉得是否加载标签-->
    <p v-if="person.age >=18">{{person.name}}是成年人</p>
    <p v-else>{{person.name}}是未成年人</p>
<!--    v-show通过条件判断，决定标签是否显示或隐藏-->
    <p v-show ="person.gender == '男'">{{person.name}}是男的</p>
    <p v-show ="person.gender == '女'">{{person.name}}是女的</p>
<!--    v-model 视图和模型双向绑定-->
    <p>姓名：<input type="text" v-model="person.name"> </p>
    <p>年龄：<input type="text" v-model="person.age"> </p>
    <p>性别：<input type="text" v-model="person.gender"> </p>
<!--    带标题的表格-->
    <table border="1px" v-bind:width="width">
        <tr><th>姓名</th><th>年龄</th><th>性别</th></tr>
<!--        v-for 对数组进行遍历 遍历一个元素就会创建一个标签-->
        <tr v-for ="per in persons" v-bind:class="per.gender == '男'?'red-bg':'green-bg'" v-on:click="showPerson(per)">
            <td>{{per.name}}</td>
            <td>{{per.age}}</td>
            <td>{{per.gender}}</td>
        </tr>
    </table>
</div>
<!--导入vue的js文件-->
<script src="js/vue.min.js"></script>
<script>
    // 创建Vue对象 el属性 :显示文字所在的页面标签  date属性（模型）:需要进行绑定的数据
    new Vue({
        el:"#app",
        data:{
            message:"Hello!Vue!",
            person:{name:"张三",age:20,gender:"男"},
            width:"400",
            persons:[
                {name:"张三",age:20,gender:"男"},
                {name:"李四",age:23,gender:"女"},
                {name:"王五",age:25,gender:"男"},
                {name:"赵六",age:18,gender:"女"}
            ]
        },
        //方法的定义
        methods:{
            showPerson(per){
                alert("姓名："+per.name+" 年龄："+per.age+" 性别"+per.gender)
            }
        },
        create(){
            console.log("created")
        },
        mounted(){
            console.log("mounted")
        },
        updated(){
            console.log("updated")
        },
        unmounted(){
            console.log("unmounted")
        },

    })
</script>

</body>
</html>